<template>
  <div class="reply-warp" id="reply-wrap">
    <div class="reply-title">
      <svg-icon icon-class="comment" size="28px" style="margin-right: 5px"></svg-icon>
      评论
    </div>
    <ReplyBox :parentData="null" isShow :articleId="articleId" @get-list="getList" />
    <div v-if="commentList.length">
      <div class="reply-item" v-for="(comment, index) of commentList" :key="comment.id">
        <div class="reply-box-avatar">
          <img class="shoka-avatar" :src="comment.avatar || avatar" />
        </div>
        <div class="content-warp">
          <div class="user-info">
            <div class="user-name">{{ comment.username }}</div>
            <svg-icon v-if="comment.fromUid == 1" icon-class="badge"></svg-icon>
          </div>
          <div class="reply-content" v-html="comment.content"></div>
          <div class="reply-info">
            <span class="reply-time">{{ formatDateTime(comment.createTime) }}</span>
            <span class="reply-btn" @click="handleparentReply(index, comment)">回复</span>
          </div>
          <ReplyBox
            ref="replyparentRef"
            class="mt-4"
            :showReply="comment.isReply"
            :parentData="comment"
            @get-list="getList"
          >
          </ReplyBox>
          <div class="sub-reply-item" v-for="(reply, ind) of comment.children.slice(0, showCount)" :key="reply.id">
            <div class="sub-user-info">
              <img class="sub-reply-avatar" :src="reply.avatar || avatar" />
              <div class="sub-user-name">{{ reply.username }}</div>
              <svg-icon v-if="reply.fromUid == 1" icon-class="badge" style="margin-left: 5px"></svg-icon>
            </div>
            <div class="reply-content">
              <div>
                回复 <span style="color: #008ac5">@{{ reply.toCommentUserName }}</span> :
                <span v-html="reply.content"></span>
              </div>
            </div>
            <div class="reply-info">
              <span class="reply-time">{{ formatDateTime(reply.createTime) }}</span>
              <span class="reply-btn" @click="handleReply(ind, reply)">回复</span>
            </div>
            <ReplyBox ref="replyRef" class="mt-4" :showReply="comment.isReply" :parentData="reply" @get-list="getList">
            </ReplyBox>
          </div>
          <div ref="readMoreRef" class="view-more" v-show="comment.children.length > 3">
            <span>共{{ comment.children.length }}条回复, </span>
            <span class="view-more-btn" @click="readMoreComment(index, comment)">{{
              showCount === 3 ? '点击查看' : '收起'
            }}</span>
          </div>
          <div class="bottom-line"></div>
        </div>
      </div>
      <div class="loading-warp" v-if="commentList.length < total">
        <el-button type="primary" class="loadmore-btn" :loading="loading" @click="handleMore">加载更多...</el-button>
      </div>
    </div>
    <div v-else style="padding: 25px; text-align: 'center'">来发评论吧~</div>
  </div>
</template>

<script setup>
import { getArticleComment } from '@/api/comment.js';
import SvgIcon from '@/components/svgIcon/index.vue';
import { formatDateTime } from '@/utils/date';
import { computed, onMounted, reactive, ref, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import ReplyBox from './ReplyBox.vue';
import avatar from '/public/images/default-avatar.png';
const articleId = computed(() => (Number(useRoute().params.id) ? Number(useRoute().params.id) : undefined));
const data = reactive({
  commentList: [],
  pageIndex: 1,
  total: 0,
  showCount: 3,
  loading: false,
});
const { commentList, pageIndex, total, showCount, loading } = toRefs(data);

// 查看更多评论
const readMoreComment = (index, comment) => {
  if (showCount.value === comment.children.length) {
    showCount.value = 3;
  } else {
    showCount.value = comment.children.length;
  }
};

// 处理树形数据回复效果
const treeList = (data, id) => {
  data.forEach((item) => {
    item.isReply = false;
    if (item.id === id) {
      item.reply = true;
    } else if (item.children && item.children.length) {
      treeList(item.children, id);
    }
  });
};

// 回复框元素
const replyRef = ref([]);
const handleReply = (index, target) => {
  replyRef.value.forEach((item) => {
    item.setReply(false);
  });
  replyparentRef.value.forEach((item) => {
    item.setReply(false);
  });
  const currentReply = replyRef.value[index];
  currentReply.setReply(true);
};

const replyparentRef = ref([]);
const handleparentReply = (index) => {
  replyparentRef.value.forEach((item) => {
    item.setReply(false);
  });
  replyRef.value.forEach((item) => {
    item.setReply(false);
  });
  const currentReply = replyparentRef.value[index];
  currentReply.setReply(true);
};

// 查看更多评论
const handleMore = () => {
  loading.value = true;
  pageIndex.value++;
  getList();
};

// 获取评论数据
const getList = async (index) => {
  const data = {
    pageNum: index || pageIndex.value,
    pageSize: 10,
    articleId: articleId.value,
  };
  const res = await getArticleComment(data);
  if (res.code == 200) {
    treeList(res.data.rows);
    total.value = res.data.total;
    loading.value = false;
    if (pageIndex.value == 1) {
      commentList.value = res.data.rows;
    } else {
      commentList.value = [...commentList.value, ...res.data.rows];
    }
  }
  loading.value = false;
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
// @import '@/assets/styles/mixin.scss';

.shoka-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.reply-title {
  display: flex;
  align-items: center;
  margin: 22px 0;
  padding-left: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
}

.sub-reply-avatar {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.reply-item {
  display: flex;
  padding-top: 20px;

  .content-warp {
    flex: auto;
    margin-left: 12px;
  }

  .bottom-line {
    border-bottom: 1px solid var(--grey-3);
    margin-top: 10px;
  }
}

.user-info {
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;

  .user-name {
    font-size: 17px;
    font-weight: 500;
    margin-right: 6px;
  }
}

.sub-reply-item {
  position: relative;
  padding: 8px 0 8px 33px;
  font-size: 15px;
  line-height: 24px;

  .sub-user-info {
    display: inline-flex;
    align-items: center;
    margin-right: 9px;
    line-height: 24px;
  }

  .sub-user-name {
    font-size: 13px;
    line-height: 24px;
  }
}

.reply-info {
  display: flex;
  align-items: center;
  margin-top: 3px;
  font-size: 16px;
  color: #9499a0;

  .reply-time {
    margin-right: 15px;
    padding-top: 2px;
  }

  .reply-like {
    display: flex;
    align-items: center;
    margin-right: 17px;
    cursor: pointer;

    &:hover .like {
      color: var(--color-pink);
    }
  }

  .reply-btn {
    cursor: pointer;

    &:hover {
      color: var(--color-pink);
    }
  }
}

.reply-content {
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 19px;
  line-height: 1.5;
  vertical-align: baseline;
}

.view-more {
  font-size: 13px;
  color: #9499a0;

  .view-more-btn {
    cursor: pointer;

    &:hover {
      color: var(--color-pink);
    }
  }
}

.loading-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;

  .loadmore-btn {
    background: var(--primary-color);
    color: var(--grey-3);
    outline: none;
    border-color: var(--primary-color);
  }
}
</style>
